<template>
	<view>
		<view class="goodsInfos" v-show="!show">
			<view class="goods_top">
				<view class="title_code">
					物流编码：{{goodsinfos.encasementCode}}
				</view>
				<view class="good_weight">
					<label>GPS:</label> <input class="flex-item-input" placeholder-style="color:rgb(255 255 255 / 0.7);" v-model="goodsinfos.gpsCode"
					 placeholder="请输入" />
				</view>
				<!--
				<view class="title_num">
					数量:{{goodsinfos.totalWeight}}
				</view>-->
				<view class="title_num">
				 <label>过磅重量:</label> <input class="flex-item-input" placeholder-style="color:rgb(255 255 255 / 0.7);" v-model="goodsinfos.weigh"
				  placeholder="请输入" />
				</view>
				<view class="good_w">
					<label>箱重:</label> <input class="flex-item-input" placeholder-style="color:rgb(255 255 255 / 0.7);" v-model="goodsinfos.weight"
					 placeholder="请输入" />
				</view>
				<view class="good_w">
					<label>总重量:</label> <input class="flex-item-input" placeholder-style="color:rgb(255 255 255 / 0.7);" v-model="goodsinfos.totalWeight"
					 placeholder="请输入" />
				</view>
				<view class="house_w">
					<view class="row">
						<label>合同号:</label>
						<view class="flex-item" style="width: 78%;">
							<text class="down-icon"></text>
							<picker :value="build_index" :range="buildLists" :range-key="'contractNo'" class="input" @change="bindPickerChanges($event,'build_index','contractNo','buildLists')">
								<view class="uni-input">{{buildLists[build_index].contractNo}}</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="radius-top"></view>
			</view>
			<view class="content-centers">
				<view class="content-items">
					<view class="titles">装箱前照片</view>
					<view class="pic-centers">
						<uploadImgs @uploadFileRes="getUploadFileRes($event,'afterImage')"
							:ImgUrl="this.handleComma(goodsinfos.afterImage)"
							:pageCheck="true"
						>
						</uploadImgs>
						<!-- <view class="pic-items" @click="upafter">
							<image :src="goodsinfos.afterImage" style="width: 100%;height: 100%;" v-if="goodsinfos.afterImage!=''"></image>
							<image src="../../static/images/icon-add.png" style="width: 100%;height: 100%;" v-if="goodsinfos.afterImage==''"></image>
						</view> -->
					</view>
				</view>

				<view class="content-items">
					<view class="titles">装箱后照片</view>
					<view class="pic-centers">
						<uploadImgs @uploadFileRes="getUploadFileRes($event,'beforeImage')"
							:ImgUrl="this.handleComma(goodsinfos.beforeImage)"
							:pageCheck="true"
						>
						</uploadImgs>
						<!-- <view class="pic-items" @click="upbefore">
							<image :src="goodsinfos.beforeImage" style="width: 100%;height: 100%;" v-if="goodsinfos.beforeImage!=''"></image>
							<image src="../../static/images/icon-add.png" style="width: 100%;height: 100%;" v-if="goodsinfos.beforeImage==''"></image>
						</view> -->
					</view>
				</view>
			</view>
			<view class="tabBar">
				<view class="tabBar-buttom" style="background-color: #3075E7;" @click="back('confirm')">
					确认
				</view>
				<view class="tabBar-buttoms" @click="back('cancel')">
					取消
				</view>
			</view>
		</view>

		<view class="goodsInfos" v-show="show">
			<view class="goods_top">
				<view class="title_top">
					{{goodsinfos.productName}}
				</view>
				<view class="title_code">
					产品编码：{{goodsinfos.productCode}}
				</view>
				<view class="title_price">
					￥{{goodsinfos.buyTaxPrice}}
				</view>
				<view class="title_num">
					数量：{{goodsinfos.productCount}}
				</view>
				<view class="title_num">
					等级：{{goodsinfos.level}}
				</view>
				<view class="good_m">
					长/宽/高：{{goodsinfos.length}} X {{goodsinfos.width}} X {{goodsinfos.height}}
				</view>
				<view class="good_weight">
					毛重：{{goodsinfos.grossWeight}}
				</view>
				<view class="good_w">
					净重：{{goodsinfos.netWeight}}
				</view>
				<view class="house_w">
					入库仓库：{{goodsinfos.warehouseName}}
				</view>
				<view class="house_w">
					库位：{{goodsinfos.storehouseName}}
				</view>
				<view class="radius-top"></view>
			</view>
			<view class="content-centers">
				<view class="content-items">
					<view class="titles">装箱前照片</view>
					<view class="pic-centers">
						<view class="pic-items" >
							<image :src="goodsinfos.productImage" style="width: 100%;height: 100%;" v-if="goodsinfos.productImage!=''"></image>
							<image src="../../static/images/icon-add.png" style="width: 100%;height: 100%;" v-if="goodsinfos.productImage==''" @click="upafter"></image>
							</view>
					</view>
				</view>

				<view class="content-items">
					<view class="titles">装箱后照片</view>
					<view class="pic-centers">
						<view class="pic-items" >
							<image :src="goodsinfos.checkImage" style="width: 100%;height: 100%;" v-if="goodsinfos.checkImage!=''"></image>		
							<image src="../../static/images/icon-add.png" style="width: 100%;height: 100%;" v-if="goodsinfos.checkImage==''" @click="upbefore"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="tabBar">
				<view class="tabBar-buttom" style="background-color: #3075E7;" @click="back('confirm')">
					确认
				</view>
				<view class="tabBar-buttoms" @click="back('cancel')">
					取消
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue'
	import uploadImgs from '@/components/uploadImgs/index.vue'
	import {
		getGoodsInfo,
		warehouseLists,
		calProductInfo,
		getstorehouseList,
		getsupplierList,
		getGoodsInfos,
		buildOrderList
	} from "../../api/public.js"
	export default {
		components: {
			uploadImgs
		},
		comments: {
			uniCard
		},
		data: function() {
			let that = this;
			return {
				id: null,
				code:null,
				currents: 1,
				houselist: [{
					id:'',
					name: ''
				}],
				buildLists:[{
					contractNo:'',
					id:''
				}],
				build_index:0,
				containerNo:0,
				supplier_index: 0,
				supplierId:'',
				index: 0,
				barCode: null,
				productList: {},
				sliderImage: [],
				description: '',
				addproductList: {},
				goodsCount: 0,
				isShadow: true,
				storeIds: null,
				houseId:null,
				storehouseId:null,
				house_index:0,
				store_indexs: 0,
				housename:'',
				storename:'',
				suppliername:'',
				storehouses:[{
					name: ' ',
					id: ''
				}],
				supplierLists:[{
					name: ' ',
					id: ''
				}],
				goodsinfos: {
					barcode:'',
					weightDifference:0,
					weigh:0,
					totalWeight:'',
					busDate: '',
					category:'',
					checkImage: '',
					containerNo: "",
					contractNo:'',
					encasementCode: "",
					beforeImage:'',
					afterImage:'',
					encasementId: '',
					existNum: '',
					isReceive: '',
					isStorehouseManage: '',
					width:''
				},
				orderid: '',
				value: [],
				indexs:"",
				infos: '',
				show: false,
				header: {
					'Authorization': ''
				},
			};
		},
		onLoad(option) {
			uni.showLoading({
				title: '正在加载'
			})
			this.barCode = option.barCode;
			this.id = option.id == 'undefined' ? '' : option.id;
			this.code =  option.code;
			this.indexs=option.index;
			warehouseLists().then(res => {
				res.content.forEach(item => this.houselist.push(item));
			})
			getstorehouseList().then(res => {
				res.content.forEach(item => this.storehouses.push(item));
			})
            
			if (!this.code) {
				this.infos = uni.getStorageSync(option.orderid + "_info");
				
				this.value = JSON.parse(this.infos.encasementList);
				this.goodsinfos = this.value[option.index];
				//console.log(this.goodsinfos)
				if(this.infos.orderStatus=='SAVE'){
					this.show = false;
				}else{
					this.show = true;
				}
				
				buildOrderList().then(res => {
					new Promise(function(resolve) {
						resolve();
					}).then(() => {
					    res.content.forEach(item => this.buildLists.push(item));
						}).then(() => {
							for (var i = 0; i < this.buildLists.length; i++) {
									if (this.buildLists[i].containerNo == this.goodsinfos.containerNo) {
										this.build_index = i
										this.containerNo=this.goodsinfos.containerNo
									}
								}
							
					 });	
				})
				
				
			 // uni.removeStorageSync(option.orderid+"_info");
			} else {
				getGoodsInfos({code:this.code,page:0,size:999}).then(res => {
					this.productList = res.content;
					this.goodsinfos = this.productList[0];
					this.show = false;
					//console.log('123456：' + this.goodsinfos);
					if(this.goodsinfos.name){
						this.goodsinfos.productName=this.goodsinfos.name
					}
					if(this.goodsinfos.code){
						this.goodsinfos.productCode=this.goodsinfos.code
					}
					console.log(this.goodsinfos)
					/**getsupplierList().then(res => {
						new Promise(function(resolve) {
							resolve();
						}).then(() => {
						res.content.forEach(item => this.supplierLists.push(item));
						}).then(() => {
							for (var i = 0; i < this.supplierLists.length; i++) {
									if (this.supplierLists[i].id == this.goodsinfos.supplierId) {
										this.supplier_index = i
										this.supplierId=this.infos.supplierId
									}
								}
							});	
					})**/
					//this.sliderImage = res.data.content[0].sliderImage.split(",");
					//et reg = new RegExp('<img', 'g');
					//this.description = res.data.content[0].description.replace(reg, '<img style="max-width:100% ;"');
				})
			}
			uni.hideLoading()
		},
		methods: {
			prevImg(src){
				let imgSrc = [src]
				uni.previewImage({
					urls:imgSrc
				})
			},
			handleImg(originImg){
				console.log('originImg',originImg)
				if(originImg){
					let img = originImg + ''
					let arr = img.split("")
					for (let i = 0; i < arr.length; i++) {
						if (arr[i] == '\\'){
							arr[i] = '/'
						}
					}
					let imgs = arr.join("")
					return imgs
				}
			},
			//处理图片数组的逗号
			handleComma(data){
				if(data){
					if(data instanceof Array){
						data = data + ''
					}
					let urlArr = data.split(',')
					for(var i = 0; i < urlArr.length; i++) {
						if(urlArr[i] == '') {
							urlArr.splice(i,1);
							i = i - 1; // i - 1 ,因为空元素在数组下标 2 位置，删除空之后，后面的元素要向前补位，
							// 这样才能真正去掉空元素,觉得这句可以删掉的连续为空试试，然后思考其中逻辑
						}
					}
					return urlArr.toString()
				}
				
			},
			getUploadFileRes(e, i) {
			        if (i == 'afterImage') {
			          this.goodsinfos.afterImage = this.handleImg(e)
			          this.goodsinfos.afterImage = this.handleComma(this.goodsinfos.afterImage)
			        } else {
			          this.goodsinfos.beforeImage = this.handleImg(e)
			          this.goodsinfos.beforeImage = this.handleComma(this.goodsinfos.beforeImage)
			        }
			      },
			bindPickerChanges: function(e, index, type, list_name) {
				this[index] = e.target.value
				this[type] = this[list_name][e.target.value].contractNo
			},
			bindPickerChange(e, index, type,typename, list_name) {
				this[index] = e.target.value
				this[type] = this[list_name][e.target.value].id
				this[typename] = this[list_name][e.target.value].name
				//console.log(this[typename])
			},
			async changecount(){
				
				calProductInfo({productId:this.id,productCount:this.goodsinfos.productCount,type:"BUY"}).then(res => {
					console.log(res)
					this.goodsinfos.taxPrice=res.taxPrice
					this.goodsinfos.taxAmount=res.taxAmount
					this.goodsinfos.boxCount=res.boxCount
				})
			},
			async changecounts(){
				calProductInfo({productId:this.id,boxCount:this.goodsinfos.boxCount,type:"BUY"}).then(res => {
					console.log(res)
					this.goodsinfos.taxAmount=res.taxAmount
					this.goodsinfos.taxPrice=res.taxPrice
					this.goodsinfos.productCount=res.productCount
				})
			},
			handleChange(event) {
				this.currents = event.mp.detail.current + 1;
			},
			previewImage(current) {
				uni.previewImage({
					current,
					urls: this.sliderImage
				});
			},
			upbefore() {
				this.header['Authorization'] = this.$store.state.app.token;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://1.117.100.189/api/localStorage/uploadImage', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: this.header,
							formData: {

							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								this.goodsinfos.beforeImage = uploadFileRes.data;
							}
						});
					}
				});
			},
			upafter() {
				this.header['Authorization'] = this.$store.state.app.token;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://1.117.100.189/api/localStorage/uploadImage', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: this.header,
							formData: {

							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								this.goodsinfos.afterImage = uploadFileRes.data;
							}
						});
					}
				});
			},
			back: function(cancel) {
				uni.removeStorageSync('addProductInfo');
				if (cancel == 'confirm') {
					if(this.goodsinfos.productCount){
						//calProductInfo({productId:this.id,productCount:this.goodsinfos.productCount,type:"BUY"}).then(res => {
						//	console.log(res)
							//this.goodsinfos.taxPrice=res.taxPrice
							//this.goodsinfos.taxAmount=res.taxAmount
							//this.goodsinfos.boxCount=res.boxCount
							/**
							this.goodsinfos.storehouseId=this.storehouseId
							this.goodsinfos.storehouseName=this.storename
							this.goodsinfos.warehouseName=this.housename
							this.goodsinfos.supplierName=this.suppliername
							this.goodsinfos.warehouseId=this.houseId
							this.goodsinfos.supplierId=this.supplierId**/
							/**uni.showToast({
								title: '已确认',
								icon: 'none',
								duration: 2000
							})**/
							this.goodsinfos.weightDifference= parseInt(this.goodsinfos.weigh)-parseInt(this.goodsinfos.totalWeight)
							this.goodsinfos.contractNo=this.contractNo
							let indexs=this.indexs
							if (indexs!='null') {
								this.value[this.indexs] = this.goodsinfos;
								uni.setStorageSync('addProductInfos', JSON.stringify(this.value));
							} else {
								this.value=this.goodsinfos;
								uni.setStorageSync('addProductInfos', JSON.stringify(this.value));
							}
							uni.navigateBack()
					//	})
						
					}else{
						//calProductInfo({productId:this.id,boxCount:this.goodsinfos.boxCount,type:"BUY"}).then(res => {
							//console.log(res)
							//this.goodsinfos.taxAmount=res.taxAmount
							//this.goodsinfos.taxPrice=res.taxPrice
							//this.goodsinfos.productCount=res.productCount	
							/**
							this.goodsinfos.storehouseId=this.storehouseId
							this.goodsinfos.warehouseId=this.houseId
							this.goodsinfos.supplierId=this.supplierId
							this.goodsinfos.productImage=this.goodsinfos.afterImage
							this.goodsinfos.checkImage=this.goodsinfos.beforeImage **/
							/**uni.showToast({
								title: '已确认',
								icon: 'none',
								duration: 2000
							})**/
							
							
							this.goodsinfos.weightDifference= parseInt(this.goodsinfos.weigh)-parseInt(this.goodsinfos.totalWeight)
							this.goodsinfos.contractNo=this.contractNo
							let indexs=this.indexs
							if (indexs!='null') {
								this.value[this.indexs] = this.goodsinfos;
								uni.setStorageSync('addProductInfos', JSON.stringify(this.value));
							} else {
								this.value=this.goodsinfos;
								uni.setStorageSync('addProductInfos', JSON.stringify(this.value));
							}
							uni.navigateBack()
						//})
					}
				}else{
					uni.navigateBack()
				}
				//uni.navigateBack()
			},
			chooseGoods: function(item) {
				this.productList = [item];
				this.sliderImage = this.productList[0].sliderImage.split(",");
				let reg = new RegExp('<img', 'g');
				this.description = this.productList[0].description.replace(reg, '<img style="max-width:100% ;"');
			}
		},
	};
</script>

<style lang="scss">
	.goodsInfos {
		width: 100%;
		overflow: hidden;
		padding-bottom: 88rpx;
		margin: 0rpx auto;

		.flex-item {
			width: 78%;
			float: left;
			overflow: hidden;
		}

		.uni-input {
			font-size: 30rpx;
			text-align: center;
			width: 100%;
			overflow: hidden;
			line-height: 60rpx;
		}

		.input {
			float: left;
			width: 100%;
			margin: 2% 4rpx;
			height: 60rpx;
			background: rgba(255, 255, 255, 0.3);
			border-radius: 12rpx;
			color: #FFFFFF;
		}

		label {
			width: 20%;
			line-height: 60rpx;
			height: 60rpx;
			float: left;
			font-size: 28rpx;
			display: block;
		}

		.flex-item-input {
			border-radius: 10rpx;
			border: none;
			height: 60rpx;
			width: 78%;
			padding-left: 2%;
			background-color: rgba(255, 255, 255, 0.2);
			float: left;
		}

		.tabBar {
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			background: #FFFFFF;
			border-top: 2rpx solid #F2F6FC;
			height: 88rpx;
			overflow: hidden;
		}

		.tabBar-buttoms {
			float: right;
			width: 228rpx;
			height: 68rpx;
			line-height: 68rpx;
			margin-top: 6rpx;
			margin-right: 14rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			text-align: center;
			border: 1rpx solid #3075E7;
			color: #3075E7;
		}

		.tabBar-buttom {
			float: right;
			width: 228rpx;
			height: 68rpx;
			line-height: 68rpx;
			margin-top: 6rpx;
			margin-right: 14rpx;
			font-size: 28rpx;
			border-radius: 10rpx;
			text-align: center;
			color: #FFFFFF;
		}

		.content-centers {
			width: 100%;
			overflow: hidden;
			margin-top: -6rpx;
			background: #FFFFFF;

			.content-items {
				width: 100%;
				overflow: hidden;
				margin: 0rpx auto;

				.titles {
					width: 95%;
					margin: 0rpx auto;
					padding-top: 10rpx;
					padding-bottom: 10rpx;
					font-size: 30rpx;
					color: #333333;
					font-weight: 600;

				}

				.pic-centers {
					width: 95%;
					height: 200rpx;
					margin: 0rpx auto;
					padding-top: 10rpx;
					padding-bottom: 10rpx;
					white-space: nowrap;
					overflow: hidden;
					overflow-x: scroll;
					/* 1 */
					-webkit-backface-visibility: hidden;
					-webkit-perspective: 1000;
					-webkit-overflow-scrolling: touch;
					/* 2 */
					text-align: justify;

					/* 3 */
					&::-webkit-scrollbar {
						display: none;
					}

					.pic-items {
						display: inline-block;
						width: 168rpx;
						margin-left: 18rpx;
						height: 168rpx;
						overflow: hidden;

						image {
							border-radius: 12rpx;
						}
					}
				}
			}
		}

		.goods_top {
			width: 100%;
			overflow: hidden;
			margin: 0rpx auto;
			background: #3075E7;

			.radius-top {
				width: 100%;
				height: 32rpx;
				overflow: hidden;
				border-top-left-radius: 18rpx;
				border-top-right-radius: 18rpx;
				background: #FFFFFF;
			}

			.house_w {
				width: 95%;
				margin: 0rpx auto;
				padding-top: 18rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				position: relative;
				padding-bottom: 28rpx;
				overflow: hidden;

				.house_code {
					width: 282rpx;
					overflow: hidden;
					position: absolute;
					top: 18rpx;
					right: 0rpx;
					text-align: center;
					font-size: 28rpx;
				}
			}

			.good_w {
				width: 95%;
				margin: 0rpx auto;
				padding-top: 10rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				padding-bottom: 28rpx;
				border-bottom: 1rpx solid #FFFFFF;
				overflow: hidden;
			}

			.good_weight {
				width: 95%;
				margin: 0rpx auto;
				padding-top: 10rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				padding-bottom: 10rpx;
				overflow: hidden;
			}

			.good_m {
				width: 95%;
				margin: 0rpx auto;
				padding-top: 28rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				padding-bottom: 10rpx;
				overflow: hidden;
			}

			.title_num {
				width: 95%;
				margin: 0rpx auto;
				padding-top: 10rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				padding-bottom: 10rpx;
				overflow: hidden;
			}

			.title_top {
				width: 95%;
				margin: 0rpx auto;
				padding-top: 10rpx;
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 600;
				padding-bottom: 10rpx;
				overflow: hidden;

			}

			.title_code {
				width: 95%;
				margin: 0rpx auto;
				padding-top: 10rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				padding-bottom: 10rpx;
				overflow: hidden;
			}

			.title_price {
				width: 95%;
				margin: 0rpx auto;
				padding-top: 18rpx;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 600;
				position: relative;
				padding-bottom: 10rpx;
				overflow: hidden;

				.price_num {
					width: 188rpx;
					overflow: hidden;
					position: absolute;
					top: 18rpx;
					right: 0rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}

	}


	.modal {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #000000;
		height: 100%;
		width: 100%;
		position: absolute;
		z-index: 9;
	}

	.modal-card {
		width: 88%;
		background-color: #FFFFFF;
		border-radius: 10px;
		height: 50%;
		overflow-y: auto;
	}

	.swiper {
		position: relative;
	}

	.swiper-wrapper {
		width: 100%;
		height: 1100rpx;
		position: relative;
	}

	.number-price {
		background: #333333;
		border: none;
		border-radius: 10rpx;
		width: 200rpx;
		height: 80rpx;
		position: relative;
		left: 7%;
		bottom: 64rpx;
		text-indent: 0.5em;
		font-size: 28px;
	}

	.number {
		background: #333333;
		border: none;
		border-radius: 5px;
		width: 71px;
		height: 40px;
		position: relative;
		left: 38%;
		bottom: 20px;
		text-indent: 1em;
	}

	.slide-image {
		width: 100%;
		height: 100%;
	}

	.pages {
		width: 40px;
		padding: 5px;
		line-height: 1;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 50px;
		color: #FFFFFF;
		position: absolute;
		right: 5%;
		bottom: 5%;
		text-align: center;
		letter-spacing: 1px;
	}

	.line {
		width: 100%;
		height: 6%;
		border-radius: 25px;
		position: absolute;
		background-color: #FFFFFF;
		color: #FFFFFF;
		text-align: center;
		bottom: -3%;
	}

	.lines {
		height: 1rpx;
		width: 90%;
		margin-left: 5%;
		background-color: #E6E6E6;
	}

	.goodsInfo {
		width: 90%;
		margin-left: 5%;
		margin-top: 4%;
	}

	.price {
		color: #B4863D;
		font-family: fantasy;
		font-size: 48rpx;
		height: 12rpx;
		margin-top: 4%;
		margin-bottom: 3%;
	}

	.goodsInfo-box {
		width: 85%;
		margin: 5% 5% 5% 5%;
		background-color: #F5F5F5;
		color: #333333;
		font-size: 26rpx;
		border-radius: 10rpx;
		padding: 20rpx;
	}
</style>
